<template>
    <div>
        <el-upload
            action="https://jlx-mall.oss-cn-qingdao.aliyuncs.com"
            :data="dataObj"
            :list-type="listType"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :on-remove="handleRemove"
            :on-success="handleUploadSuccess"
            :on-preview="handlePreview"
            :limit="maxCount"
            :on-exceed="handleExceed"
            :show-file-list="showFile"
        >
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt/>
        </el-dialog>
    </div>
</template>
<script>
import {policy} from "./policy";
import {getUUID} from '@/utils'

export default {
    name: "multiUpload",
    props: {
        //图片属性数组
        value: Array,
        //最大上传图片数量
        maxCount: {
            type: Number,
            default: 30
        },
        listType: {
            type: String,
            default: "picture-card"
        },
        showFile: {
            type: Boolean,
            default: true
        }

    },
    data() {
        return {
            dataObj: {
                policy: "",
                signature: "",
                key: "",
                ossaccessKeyId: "",
                dir: "",
                host: "",
                uuid: ""
            },
            dialogVisible: false,
            dialogImageUrl: null
        };
    },
    computed: {
        fileList() {
            let fileList = [];
            for (let i = 0; i < this.value.length; i++) {
                fileList.push({url: this.value[i]});
            }

            return fileList;
        }
    },
    mounted() {
    },
    methods: {
        emitInput(fileList) {
            let value = [];
            for (let i = 0; i < fileList.length; i++) {
                value.push(fileList[i].url);
            }
            this.$emit("input", value);
        },
        handleRemove(file, fileList) {
            this.emitInput(fileList);
        },
        handlePreview(file) {
            this.dialogVisible = true;
            this.dialogImageUrl = file.url;
        },
        beforeUpload(file) {
            let _self = this;
            return new Promise((resolve, reject) => {
                policy()
                    .then(response => {
                        console.log("这是什么${filename}");
                        _self.dataObj.policy = response.data.policy;
                        _self.dataObj.signature = response.data.signature;
                        _self.dataObj.ossaccessKeyId = response.data.accessid;
                        _self.dataObj.key = response.data.dir + getUUID() + "_${filename}";
                        _self.dataObj.dir = response.data.dir;
                        _self.dataObj.host = response.data.host;
                        resolve(true);
                    })
                    .catch(err => {
                        console.log("出错了...", err)
                        reject(false);
                    });
            });
        },
        handleUploadSuccess(res, file) {
            this.fileList.push({
                name: file.name,
                // url: this.dataObj.host + "/" + this.dataObj.dir + "/" + file.name； 替换${filename}为真正的文件名
                url: this.dataObj.host + "/" + this.dataObj.key.replace("${filename}", file.name)
            });
            this.emitInput(this.fileList);
        },
        handleExceed(files, fileList) {
            this.$message({
                message: "最多只能上传" + this.maxCount + "张图片",
                type: "warning",
                duration: 1000
            });
        }
    }
};
</script>
<style>
</style>


